<template>
  <div class="box">
    <el-form ref="userForm" :model="user_forms" :rules="userRules" :label-position="labelPosition" label-width="100px">
      <el-form-item v-if="user_type == 'add'" prop="username" label="管理员账号">
        <el-input size="medium" v-model="user_forms.username" placeholder="请输入管理员账号"></el-input>
      </el-form-item>
      <el-form-item v-else prop="username" label="管理员账号">
        <span>{{ user_forms.username }}</span>
      </el-form-item>
      <el-form-item v-if="user_type == 'add'" prop="password" label="管理员密码">
        <el-input size="medium" v-model="user_forms.password" placeholder="请输入管理员密码" type="password"></el-input>
      </el-form-item>
      <el-form-item v-else label="管理员密码"><el-input size="medium" v-model="user_forms.password" placeholder="请输入管理员密码" type="password"></el-input></el-form-item>

      <el-form-item prop="name" label="用户昵称"><el-input size="medium" v-model="user_forms.name" placeholder="请输入管理员昵称"></el-input></el-form-item>
      <el-form-item prop="mobile" label="联系号码"><el-input size="medium" v-model="user_forms.mobile" placeholder="请输入联系号码"></el-input></el-form-item>

      <el-form-item prop="role_id" label="角色">
        <el-select size="medium" v-model="user_forms.role_id"><el-option v-for="item in allroleslist" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
      </el-form-item>
      <el-form-item label="账号状态">
        <el-radio-group v-model="user_forms.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" @click="addSave" v-if="user_type == 'add'">确定</el-button>
        <el-button size="medium" @click="editSave" v-else>确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {objextend} from '@/utils/index';
import {saveadminuser, getuserdetail, editadminuser} from '@/api/shop/admin';
export default {
  name: 'Edituser',
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!/^1[23456789]\d{9}$/.test(value)) {
        callback(new Error('手机号码有误，请重填'));
      } else {
        callback();
      }
    };
    return {
      labelPosition: 'left',
      user_forms: {
        username: '',
        name: '',
        mobile: '',
        password: '',
        role_id: '',
        status: 1
      },
      userRules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入管理员名'
          }
        ],
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入管理员账号'
          },
          {
            min: 4,
            max: 32,
            message: '长度在 4 到32 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入管理员密码'
          }
        ],
        mobile: [
          {
            required: true,
            trigger: 'blur',
            validator: validateMobile
          }
        ],
        role_id: [
          {
            required: true,
            trigger: 'change',
            message: '请选择管理员角色'
          }
        ]
      }
    };
  },
  props: {
    user_type: {
      type: String,
      default: 'add'
    },
    uid: {
      type: Number,
      default: -1
    }
  },
  computed: {
    ...mapGetters(['allroleslist'])
  },
  watch: {
    uid() {
      this.user_forms = {
        username: '',
        name: '',
        mobile: '',
        password: '',
        role_id: '',
        status: 1
      };
      this.getlist();
    }
  },
  methods: {
    getlist() {
      if (this.uid == -1) {
        return false;
      }
      var data = {
        id: this.uid
      };
      getuserdetail(data).then(res => {
        var jsondata = res.msg;
        // jsondata.status = Number(jsondata.status == 1)
        this.user_forms = objextend(this.user_forms, jsondata);
        this.user_forms.id = jsondata.id;
        this.user_forms.status=Number(this.user_forms.status)
        this.user_forms.update_time = jsondata.update_time;
      });
    },
    addSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.user_forms;
          saveadminuser(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editSave() {
      var _this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          var data = _this.user_forms;
          if(!data.password){
            delete data.password
          }
          editadminuser(data).then(res => {
            _this.close();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.user_forms = {
        username: '',
        name: '',
        mobile: '',
        password: '',
        role_id: '',
        status: 1
      };
      // this.uid=''
      this.$emit('on-close');
    }
  },
  mounted() {
    if (this.uid) {
      this.getlist();
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
    height: calc(100vh - 77px);
    overflow: scroll;*/
}
</style>
